<template>
  <div class="wrapper">
    <swiper :options="swiperOptions" v-if="showSwiper">
      <swiper-slide v-for="item of list" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  props: {
    list: Array
  },
  data () {
    return {
      swiperOptions: {
        pagination: '.swiper-pagination',
        loop: true
      }
      // swiperList: [
      //   {
      //     id: '0001',
      //     imgUrl: 'http://pic1.win4000.com/wallpaper/e/569c42d53ad5a.jpg'
      //   }, {
      //     id: '0002',
      //     imgUrl: 'http://pic1.win4000.com/wallpaper/0/56dce3546766e.jpg'
      //   }, {
      //     id: '0003',
      //     imgUrl: 'http://pic1.win4000.com/wallpaper/8/59bcbfae08691.jpg'
      //   }, {
      //     id: '0004',
      //     imgUrl: 'http://pic1.win4000.com/wallpaper/1/562d810a301b6.jpg'
      //   }, {
      //     id: '0005',
      //     imgUrl: 'http://pic1.win4000.com/wallpaper/b/59bf1f5d532e7.jpg'
      //   }
      // ]
    }
  },
  computed: {
    showSwiper () {
      return this.list.length
    }
  }
}
</script>

<style lang="stylus" scoped>
  .wrapper >>> .swiper-pagination-bullet-active
    background : red !important
  .wrapper
    overflow :hidden
    width :100%
    height :0
    padding-bottom :33.9%
    background :#ccc
    .swiper-img
      width :100%
</style>
